<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <el-button type="primary" :icon="Plus" @click="showTrademarkDialog">添加</el-button>
      </div>
    </template>
    <!-- data是用来接收渲染数据的，直接的数据源是data中的值，是一个数组 -->
    <!-- prop是当前行的数据渲染源 label是显示出来的名称-->
    <el-table v-loading="loading" :data="trademarkList" border style="width: 100%">
      <el-table-column type="index" align="center" label="序号" width="80" />
      <el-table-column prop="tmName" label="品牌名称" />
      <el-table-column label="品牌LOGO">
        <template v-slot="{ row }">
          <img :src="row.logoUrl" alt="" style="width:100px;height:100px;">
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row, $index }">
          <el-button title="修改" size="small" type="warning" :icon="Edit" @click="editTrademark(row)" />
          <el-button title="删除" size="small" type="danger" :icon="Delete" @click="removeTrademark(row)" />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[3, 6, 9, 12]"
      :small="small" :disabled="disabled" :background="background" layout=" prev, pager, next, jumper,->, sizes,total"
      :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    <!-- 弹出框效果 -->
    <el-dialog v-model="dialogFormVisible" :title="`${trademark.id ? '修改' : '添加'}品牌`">
      <!-- <el-form :model="form"> -->
      <el-form :rules="rules" :model="trademark" ref="ruleFormRef">
        <el-form-item label="品牌名称" label-width="90px" prop="tmName">
          <el-input v-model="trademark.tmName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="品牌LOGO" label-width="90px" prop='logoUrl'>
          <el-upload class="avatar-uploader" :action="`${BASE_URL}/admin/product/upload`" :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
            <img v-if="trademark.logoUrl" :src="trademark.logoUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
            <template #tip>
              <div class="el-upload__tip">
                只能上传jpg/jpeg/png等格式图片,且大小不能超过2M
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <!-- <el-button type="primary" @click="btnTrademark">确定</el-button> -->
          <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
        </span>
      </template>
    </el-dialog>

  </el-card>

</template>

<script lang="ts">
export default {
  name: 'Trademark'
}
</script>


<script lang="ts" setup>
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import { reqGetTrademarkListData, reqSaveTrademarkInfo, reqDeleteTrademarkInfo, reqUpdateTrademarkInfo } from '@/api/product/trademark'
import { onMounted, ref, reactive } from 'vue'
import type { TrademarkListModel, TrademarkMode } from '@/api/product/model/trademarkModel'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { UploadProps, FormInstance, FormRules } from 'element-plus'

//检验上传规则
const ruleFormRef = ref<FormInstance>() // 定义一个ref值 和el-form绑定

const rules = reactive<FormRules>({
  tmName: [
    { required: true, message: '请添加品牌名称', trigger: 'blur' },
    { min: 1, max: 10, message: '长度在1到10之间', trigger: 'blur' }
  ],
  logoUrl: [{ required: true, message: '请选择要上传的图片', trigger: 'change' }]
})


// 动态读取环境变量中的值
const BASE_URL = import.meta.env.VITE_API_URL
const currentPage = ref<number>(1) // 当前的页码
const pageSize = ref<number>(3) // 每页要显示的数量
const total = ref<number>(0)
// 注意此时的数组是存储的将来需要渲染到页面中的品牌数据，当前数组是空数组
// 当数据请求成功之后，需要给当前的数组赋值，如果用的是reactive格式，则会变成非响应式
// 数组如果是ref格式，我们是通过trademarkList.value进行赋值 而value值是Proxy对象
const trademarkList = ref<TrademarkListModel>([])


// 分页器相关的变量
const small = ref<boolean>(false)
const background = ref<boolean>(false)
const disabled = ref<boolean>(false)

// 弹出框相关的变量
const dialogFormVisible = ref<boolean>(false)
const formLabelWidth = '140px' // 这个没用了
// const initTrademark = ()=>{
//   return {tmName:'',logoUrl:''}
// }
// 每次调用这个函数，都会返回一个新的独立对象，和之前的数据没有关系
const initTrademark = () => ({ tmName: '', logoUrl: '' })
// 品牌上传需要用到的响应式的对象
const trademark = reactive<TrademarkMode>(initTrademark())
// const form = reactive<TrademarkMode>({
//   tmName:'',
//   logoUrl:''
// })

// loading效果的变量
const loading = ref<boolean>(true)
// 定义一个方法来获取数据 页码切换的时候也会用到
// 1. 根据分页获取品牌数据
const getTrademarkListData = async () => {
  loading.value = true
  // const result = await reqGetTrademarkListData(1, 5)
  const result = await reqGetTrademarkListData(currentPage.value, pageSize.value)
  trademarkList.value = result.records
  total.value = result.total
  // 隐藏loading效果
  loading.value = false
}

// 2. 组件挂载完成时要执行的逻辑
onMounted(() => {
  // 发送请求
  getTrademarkListData()
})

// 分页相关的两个事件
// 3. 更改每页显示条数时触发的事件处理程序
const handleSizeChange = (val: number) => {
  // val就是每页显示的条数 其实也相当于是pageSize
  pageSize.value = val
  currentPage.value = 1 // 把当前页码再重置为1
  // loading.value =true // 添加一个loading效果
  // 重新发送请求，获取新页码中的数据
  getTrademarkListData()
}

// 4. 根据当前页码进行切换时触发的函数
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  // 再次呈现一个loading效果
  // loading.value =true
  // 重新发送请求，获取新页码中的数据
  getTrademarkListData()
}

// 图片上传时的两个函数
// 5. 图片上传成功后会执行的函数
const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  // form.logoUrl = response.data // 将图片上传成功后在服务器的地址保存一下
  trademark.logoUrl = response.data
}

// 6. 图片上传前的校验函数
const beforeAvatarUpload: UploadProps['beforeUpload'] = rawFile => {
  const imgTypes = ['image/jpeg', 'image/jpg', 'image/png']
  // if (rawFile.type !== 'image/jpeg') {
  if (!imgTypes.includes(rawFile.type)) {
    ElMessage.error('上传的图片格式必须是JPG/JPEG/PNG格式,请重试')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    // 1G=1024M 1M=1024K 1K=1024byte
    ElMessage.error('图片最大不能超过2M,请重试!')
    return false
  }
  return true
}

// 7. 实现添加或更新品牌 当前这个确定按钮其实是有两种功能的 一个是添加品牌 一个是更新品牌
const btnTrademark = async () => {
  let result
  if (trademark.id) {
    // 更新操作
    result = await reqUpdateTrademarkInfo(trademark)
  } else {
    // 添加品牌
    // await reqSaveTrademarkInfo(form)
    result = await reqSaveTrademarkInfo(trademark)
  }
  // 要提示添加成功
  ElMessage({
    message: '操作品牌成功',
    type: 'success'
  })

  // 关闭当前对话框
  dialogFormVisible.value = false

  // 重新渲染当前数据
  currentPage.value = 1
  getTrademarkListData()
}

const submitForm = async (formEl: FormInstance | undefined) => {
  console.log('事件触发了...')
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (trademark.id) {
        reqUpdateTrademarkInfo(trademark)
      } else {
        reqSaveTrademarkInfo(trademark)
      }
      // 提示添加成功
      ElMessage({
        type: 'success',
        message: '操作品牌成功...'
      })
      // 关闭对话框
      dialogFormVisible.value = false
      // 跳转到第1页
      !trademark.id ? (currentPage.value = 1) : currentPage.value
      getTrademarkListData()
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 8. 当单击'添加品牌'按钮时，要弹出对话框 并清空之前的数据信息
const showTrademarkDialog = () => {
  Object.assign(trademark, initTrademark())
  delete trademark.id // 清除一下id
  dialogFormVisible.value = true
}

// 9. 单击删除按钮 弹出是否删除的提示框 并收集待删除的品牌的id
const removeTrademark = (row: TrademarkMode) => {
  ElMessageBox.confirm(`您真的要删除${row.tmName}这个品牌吗?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      // 真正的删除品牌
      await reqDeleteTrademarkInfo(row.id as number)
      ElMessage({
        type: 'success',
        message: '删除成功...'
      })
      // 如果删除的是最后一页的最后一条数据，则需要让当前页码减1
      currentPage.value = trademarkList.value.length > 1 ? currentPage.value : currentPage.value - 1
      // 渲染当前页面
      getTrademarkListData()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除...'
      })
    })
}

// 10. 更新品牌数据之弹框显示待更新的品牌数据
const editTrademark = (row: TrademarkMode) => {
  // 将需要显示出来的品牌数据给trademark进行赋值，因为数据是响应式的，页面会渲染出来
  Object.assign(trademark, row) // 注意 此时的row当中，是有id的
  dialogFormVisible.value = true // 显示对话框
}


</script>

<style scoped>
.el-input {
  width: 75%;
}
</style>
<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  /* width: 480px; */
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>